<template>
  <div>
    <div class="tab">
      <div class="back" @click="handleBack">返回</div>
      <div class="title">{{ kindName }}</div>
    </div>
    <div class="content">
      <MovieItem
        v-for="item of arrList"
        :key="item._id"
        :item="item"
        @click.native="handleMovieDet(item._id)"
      ></MovieItem>
    </div>
  </div>
</template>

<script>
import MovieItem from "./components/Item.vue";
export default {
  components: { MovieItem },
  data() {
    return {
      kindName: "",
      arrList: [],
    };
  },
  methods: {
    handleMovieDet(val) {
      this.$router.push(`/movie/detail?id=${val}`);
    },
    handleBack() {
      this.$router.back();
    },
    getRating(num) {
      var arr = [];
      for (var i = 0; i < 5; i++) {
        if (num >= 2) {
          arr.push(2);
        } else if (num > 0) {
          arr.push(Math.round(num * 10) / 10);
        } else {
          arr.push(0);
        }
        num = num - 2;
      }
      return arr;
    },
  },
  mounted() {
    var { kind } = this.$route.query;
    this.kindName = kind;
    if (kind == "top排行") {
      this.$http("http://47.108.197.28:4000/api/movie/top250").then((res) => {
        res.data.res.forEach((item) => {
          item.rat = this.getRating(item.rating);
        });
        this.arrList = res.data.res;
      });
    } else if (kind == "正在热映") {
      this.$http("http://47.108.197.28:4000/api/movie/inTheaters").then(
        (res) => {
          res.data.res.forEach((item) => {
            item.rating = item.raiting;
            item.rat = this.getRating(item.raiting);
          });
          this.arrList = res.data.res;
        }
      );
    } else if (kind == "即将上映") {
      this.$http("http://47.108.197.28:4000/api/movie/comingSoon").then(
        (res) => {
          res.data.res.forEach((item) => {
            item.rat = this.getRating(item.rating);
          });
          this.arrList = res.data.res;
        }
      );
    }
  },
};
</script>

<style scoped>
.tab {
  position: relative;
  text-align: center;
  line-height: 80px;
  height: 80px;
  background-color: rgb(83, 120, 134);
  color: #fff;
}
.back {
  position: absolute;
  left: 20px;
  top: 50%;
  transform: translateY(-50%);
}
.tab .title {
  font-size: 34px;
}
.content {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
</style>